<template>
  <div class="verification-button" ref="verificationBox">
    <button v-if="!validation">
        <div class="info" @click="click">
            <img :src="icon" :class="{'rotating':rotating}">
            <span v-if="infoShow" :style="{'color':infoColor}">{{info}}</span>
        </div>
        <div class="refreshImg">
            <img :src="refreshImg" alt="" v-if="refreshState" @click="refresh">
            <span>点击刷新<b></b></span>
        </div>
    </button>
    <div class="validation-box" v-if="validation">
        <ajaxValidation v-if="saveType == 'ajax'" @validation-finish="check_virtual"></ajaxValidation>
        <imgClick v-if="saveType == 'img_click'" @validation-finish="check_virtual" @close-state="close"></imgClick>
        <imgBase64 v-if="saveType == 'img_base64'" @validation-finish="check_virtual" @close-state="close"></imgBase64>
        <drag v-if="saveType == 'dragging'" @validation-finish="check_virtual" @close-state="close"></drag>
        <imgCn v-if="saveType == 'img_cn'" @validation-finish="check_virtual" @close-state="close"></imgCn>
    </div>
  </div>
</template>

<script>
import dunpai from "../assets/dunpai.svg";
import dunpaiok from "../assets/dunpaiok.svg";
import xuanzhuan from "../assets/xuanzhuan.svg";
import ajaxValidation from "./ajax_validation";
import imgClick from "./img_click";
import imgBase64 from "./img_base64";
import drag from "./drag";
import imgCn from "./img_cn";
import refreshImg from '../assets/refresh.svg'

export default {
  data() {
    return {
      //是否验证中  
      validation:false,
      //验证图标
      icon : dunpai,
      //图片旋转
      rotating : false,
      //验证信息
      info : "点击进行验证",
      //信息颜色
      infoColor:'#757575',
      //验证信息显示隐藏
      infoShow : true,
      //验证类型
      saveType:'',
      //刷新图标
      refreshImg:refreshImg,
      //刷新状态
      refreshState:false,
      //控制点击次数
      clickKey:true,
      //提示状态

    };
  },
  components:{
      imgClick,
      imgBase64,
      ajaxValidation,
      drag,
      imgCn
  },
  created(){
    //   this.$ls.clear();
  },
  mounted(){
    this.$store.commit('set_appid',this.$route.params.appid);
    this.$store.commit('set_operation',this.$route.params.operation);
    this.$store.commit('set_theme',this.$route.params.theme);
  },
  methods:{
      //请求验证类型
      click(){
          if(this.clickKey){
                this.clickKey = false;
                this.icon = xuanzhuan;
                this.infoShow = false;
                this.rotating = true;

                this.$ajax(
                    'index',
                    {appid:this.$store.state.appid,operation:this.$store.state.operation},
                    (res)=>{
                        console.log('type',res.data.data.type)
                        //存储验证id和验证类型
                        this.$store.commit('set_identifying',res.data.data.identifying);
                        this.$store.commit('set_type',res.data.data.type);
                        //根据验证类型判断验证器
                        this.saveType = res.data.data.type;
                        if(res.data.data.type){
                            this.validation = true;
                            let time = setTimeout(()=>{
                                console.log('height:',this.$refs.verificationBox.offsetHeight)
                                window.parent.postMessage({
                                    'event':'changeBox',
                                    'data':{
                                        width:this.$refs.verificationBox.offsetWidth,
                                        height:this.$refs.verificationBox.offsetHeight,
                                        operation:this.$store.state.operation
                                    }
                                },'*')
                            },100)
                        }
                        
                    },
                    (error)=>{
    
                    }
                )
          }   
      },
      //虚拟验证
      check_virtual(save_value){
          this.$ajax(
              'check_virtual',
              {
                  appid:this.$store.state.appid,
                  operation:this.$store.state.operation,
                  type:this.$store.state.type,
                  identifying:this.$store.state.identifying,
                  value:save_value,
              },
              (res)=>{
                  if(res.data.data){
                      //验证成功
                    this.validation = false;
                    this.icon = dunpaiok;
                    this.infoShow = true;
                    this.rotating = false;
                    this.infoColor = '#006c21';
                    this.info = '验证通过';
                    this.refreshState = true;
                    window.parent.postMessage({
                        'event':'validationSucceed',
                        'data':{
                            data:this.$store.state.identifying,
                            operation:this.$store.state.operation
                        }
                    },'*')
                  }
              },
              (error)=>{}
          )
      },
      //刷新
      refresh(){
          this.clickKey = true;
          this.icon = dunpai;
          this.infoShow = true;
          this.info = "点击进行验证";
          this.infoColor = "#757575";
          this.refreshState = false;
      },
      close(closeState){
          this.validation = !closeState;
          this.refresh();
      }
  }
};
</script>

<style scoped>
.verification-button {
    background: #ddd;
  height: 100vh;
}
button {
  border: none;
  background: none;
  width: 100%;
  height: 100%;
  outline: none;
  position: relative;
}
.refreshImg{
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -10px;
}
.refreshImg img{
    height: 20px;
    width: auto;
}
.refreshImg span{
    display: inline-block;
    color: #fff;
    font-size: .5rem;
    position: absolute;
    top: -22px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    white-space: nowrap;
    padding: 3px;
    opacity: 0;
}
.refreshImg span b{
    border-width: 3px;
    border-color: rgba(0,0,0,0.5) transparent transparent transparent;
    border-style: solid;
    position: absolute;
    right: 5px; 
    top:100%;
}
.refreshImg:hover span{
    opacity: 1;
}
.info {
  display: flex;
  justify-content: center;
  align-items: Center;
  height: 100%;
  font-size: 16px;
}
img {
  width: 32px;
  height: auto;
  margin-right: 5px;
}
.rotating{
    transform: rotate(3600deg);
    transition: all 10s linear;
}
</style>
